<template>
  <div class="app-container bg-white">
    <div class="page-body">
      <div class="full-width" id="mul_select">
        <el-form :inline="true" size="small">
          <el-form-item>
            <el-select size="small" v-model="proId" placeholder="请选择渠道类型" @change="selectpt" clearable>
              <el-option v-for="item in cityOptions" :label="item.channelName" :key="item.id" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" class="width_104" @click="_selects">查询</el-button>
            <el-button size="small" class="width_104" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
               <!-- v-if="roleBtns.includes('sys:goods:insert') || $store.getters.isAdmin" -->
          <el-button size="mini" type="success" icon="el-icon-document-add" @click="addtag(1)">新增</el-button>
        </div>
      <el-table class="margin_top_20" :data="tableData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading">
        <el-table-column type="index" width="100" label="序号" align="center"> </el-table-column>
        <el-table-column prop="typeName" label="banner分类名称" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="typeKey" label="分类key值" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="proId" label="渠道平台">
          <template slot-scope="scope">
            <div v-for="item in cityOptionlist" :key="item.id">{{ item.id == scope.row.proId ? item.channelName : '' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="广告位备注" :show-overflow-tooltip="true"> </el-table-column>
        <!-- <el-table-column prop="status" label="状态(上下架)">
              <template slot-scope="scope"> <el-switch @change="updatatag(scope.row, scope.$index)" v-model="scope.row.status == 0 ? false : true" active-color="#13ce66" inactive-color="#ff4949"></el-switch></template>
            </el-table-column> -->
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button class="my-btn my-btn--mini my-btn--primary plain" @click="edit(scope.row)">编辑</el-button>
            <el-button class="my-btn my-btn--mini my-btn--danger plain" @click="handleDelete(scope.row)">删除</el-button>
            <el-button class="my-btn my-btn--mini my-btn--primary plain" @click="imglist(scope.row)">图片列表</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增弹出框 -->
      <el-dialog :title="isadd" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="广告名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="请输入广告名称" style="width: 45%" maxlength="55" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="下发渠道" :label-width="formLabelWidth">
            <el-select v-model="form.pt" placeholder="请选择渠道" style="width: 45%" @change="selectpt">
              <el-option v-for="item in cityOptions" :label="item.channelName" :key="item.id" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类Key值" :label-width="formLabelWidth">
            <el-input v-model="form.keyys" autocomplete="off" placeholder="请输入分类Key值(不可重复)" maxlength="55" style="width: 45%" show-word-limit></el-input>
          </el-form-item>
          <!-- <el-form-item label="状态" :label-width="formLabelWidth">
                <el-select v-model="form.statu" placeholder="请选择" style="width:45%" @change="upclo">
                  <el-option v-for="item in upstatus" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item> -->
          <el-form-item label="广告位备注" :label-width="formLabelWidth">
            <el-input v-model="form.bz" autocomplete="off" placeholder="请输入广告位备注" style="width: 45%" maxlength="255" type="textarea" :rows="5"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addgname">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="text-center">
      <br />
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
    </div>
    <!-- <el-pagination class="fy" background :page-size="10" layout="prev, pager, next,total" :total="pagecount" @current-change="paging"> </el-pagination> -->
  </div>
</template>

<script>
import { getContentList, saveContent, removeContent } from '@/api/tag'
import { getChannelList } from '@/api/storecenter'
import { getBanerList, addBanerList, delBanerList, uptaeBanerList } from '@/api/banner'
import Setting from '@/settings'
export default {
  data() {
    return {
      proId: '',
      fullscreenLoading: false,
      tableData: [],
      brandtitle: '',
      storename: '',
      prid: '',
      cityOptions: [],
      cityOptionlist: [],
      dialogFormVisible: false,
      // 是编辑还是新增
      isesit: false,
      isadd: '',
      currentId: '',
      form: {
        name: '',
        bz: '',
        keyys: '',
        pt: '',
      },
      upstatus: [
        {
          value: '1',
          label: '上架',
        },
        {
          value: '0',
          label: '下架',
        },
      ],
      options: [],
      value: '',
      formLabelWidth: '120px',
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      loading: false,
      pageCount: 0,
    }
  },
  created() {
    this.getContentList()
    this.getqdlist()
  },
  methods: {
    // 查询列表
    async _selects() {
      const data = await getBanerList({
        proId: this.proId,
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
      })
      if (data.code == 200) {
        this.tableData = data.data.list
        this.pageCount = data.data.total
      }
    },
    // 新增的确定按钮事件
    async addgname() {
      console.log(this.form.pt)
      console.log(this.form.name)
      console.log(this.form.keyys)
      console.log(this.currentId)
      if (!this.form.name) {
        this.$message('请输入广告名称')
        return
      } else if (!this.form.pt) {
        this.$message('请选择下发渠道')
        return
      } else if (!this.form.keyys) {
        this.$message('请输入分类key值')
        return
      }
      // 如果true进入编辑
      if (this.isesit) {
        const data = await uptaeBanerList({
          //  项目ID
          proId: this.form.pt,
          typeName: this.form.name,
          creatorId: '222222',
          // 分类Key
          typeKey: this.form.keyys,
          id: this.currentId,
          remark: this.form.bz,
        })
        if (data.code == 200) {
          this.$message.success('修改成功')
          this.dialogFormVisible = false
          this.getContentList()
        }
      } else {
        const data = await addBanerList({
          //  项目ID
          proId: this.prid,
          typeName: this.form.name,
          creatorId: '222222',
          // 分类Key
          typeKey: this.form.keyys,
          remark: this.form.bz,
        })
        if (data.code == 200) {
          this.$message.success('新增成功')
          this.dialogFormVisible = false
          this.getContentList()
        }
      }
    },
    // 点击编辑还是点击新增判断
    async addtag(types, row) {
      this.dialogFormVisible = true

      // 1 进入编辑
      if (types == 2) {
        this.currentId = row.id
        // 回显广告名称
        this.form.name = row.typeName
        // 回显下发渠道
        this.form.pt = row.proId
        // 回显分类KEY值
        this.form.keyys = row.typeKey
        this.form.bz = row.remark
        this.isesit = true
        this.isadd = '编辑'
      } else {
        this.form = {}
        this.isesit = false
        this.isadd = '新增'
      }
    },
    // 获取页面列表
    async getContentList() {
      this.loading = true;
      const data = await getBanerList({
        proId: this.proId,
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
      })
      this.tableData = data.data.list;
      this.pageCount = data.data.total;
      this.loading = false
      if ((!data.data.list || !data.data.list.length) && this.pageIndex > 1) {
        this.pageIndex = 1
        this.getContentList()
      }
    },
    // 编辑按钮
    async edit(row) {
      console.log(row)
      this.addtag(2, row)
    },
    // 删除按钮
    async handleDelete(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const data = await delBanerList({
            id: row.id,
          })
          if (data.code == 200) {
            this.$message.success('删除成功')
            this.getContentList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 查询列表
    async selects() {
      const data = await getContentList({
        name: this.storename,
      })
      if (data.code == 200) {
        this.tableData = data.data.list
        this.pageCount = data.data.total
      }
    },
    //  分页接口点击
    async paging(pageNum) {
      console.log(pageNum)
      const data = await getBanerList({
        pageSize: this.pageSize,
        pageNum: this.pageIndex,
        name: this.storename,
      })
      this.tableData = data.data.list
      this.pageCount = data.data.total
    },
    // 点击跳转子页面
    imglist(row) {
      this.$router.push({
        name: 'BannerManagementAdd',
        params: { id: row.id },
      })
    },
    // 获取渠道列表
    async getqdlist() {
      const data = await getChannelList({})
      this.cityOptions = data.data.list
      this.cityOptionlist = data.data.list
    },
    // 选中渠道平台后触发
    selectpt(val) {
      console.log(val)
      this.prid = val
    },
    // 新增时的上下架状态
    upclo(val) {
      console.log(val)
    },
    //重置
    resetForm() {
      this.proId = '';
      // this.form.phone = '';
      // this.categoryId = '';
      // this.value1 = '';
      // this.form.minTime = ''
      // this.form.maxTime = ''
      this.getContentList();
    },
    // 分页操作
    handlePagingChange(event) {
      this.pageIndex = event
      this.getContentList()
    },
    handleSizeChange(event) {
      this.pageIndex = 1
      this.pageSize = event
      this.getContentList()
    },
  },
}
</script>

<style scoped>
.width_104 {
  width: 104px;
}
.all {
  height: auto;
  width: 97%;
  background-color: #fff;
  margin: 20px auto;
  margin-top: 50px;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  padding-bottom: 40px;
}
.tagtitle {
  padding: 0 15px;
  padding-bottom: 23px;
  padding-top: 13px;
  color: #595961;
  font-weight: bold;
  font-size: 18px;
}
.tagtable {
  background-color: #f2f2f6;
  border-radius: 6px;
  height: 70%;
  padding: 15px;
  width: 100%;
}
.tabletitle {
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  padding: 15px;
  /* box-sizing: border-box; */
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0px !important;
}
.fy {
  text-align: center;
  margin-top: 40px;
}
</style>
